<template>
    <div class="header">
        <div class ="header-left icon-user"></div>
        <div class ="header-nav">
            <span>推荐</span>
            <span>书架</span>
        </div>
        <div class="header-right icon-search"></div>
    </div>
</template>
<script>
export default {
    name:"HomeHeader"
}
</script>
<style lang="stylus" scoped>
    @import '~styles/varables.styl'
    .header
        display:flex
        justify-content:space-around
        width:100%
        height:1rem
        line-height:1rem
        font-size:18px
        background:$bgColor
        color:gray
        .header-left
            text-align:center
            width:1rem
            float:left
            line-height:1rem
        .header-nav
            display:flex
            justify-content:space-around
            width:3.5rem
            flex:1
            float:left
            color:black
            span
                text-align:center
                width:1rem 
        .header-right
            text-align:center
            width:1rem
            float:right
            line-height:1rem
</style>